<template>
  <div class="video-grid">
    <div
      v-for="video in videos"
      :key="video._id"
      class="video-item"
      @click="handleVideoClick(video)"
    >
      <div class="video-cover">
        <img :src="video.coverUrl" alt="视频封面" />
        <div class="video-info">
          <span class="play-count">
            <van-icon name="play-circle-o" />
            {{ formatCount(video.playCount) }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  videos: {
    type: Array,
    default: () => [],
  },
})

// 点击视频
const handleVideoClick = (video) => {
  // TODO: 跳转到视频详情页
  console.log('点击视频', video)
}

// 格式化播放次数
const formatCount = (count) => {
  if (count < 10000) {
    return count
  } else if (count < 100000000) {
    return (count / 10000).toFixed(1) + '万'
  } else {
    return (count / 100000000).toFixed(1) + '亿'
  }
}
</script>

<style scoped>
.video-grid {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--container-background-color);
  padding: 1px;
}

.video-item {
  position: relative;
  width: calc(33.333% - 1px);
  margin-right: 1px;
  margin-bottom: 1px;
  background-color: #fff;
}

/* 每行最后一个元素不需要右边距 */
.video-item:nth-child(3n) {
  margin-right: 0;
}

/* 最后一行的元素不需要底部边距 */
.video-item:nth-last-child(-n + 3) {
  margin-bottom: 0;
}

.video-cover {
  position: relative;
  padding-bottom: 133%; /* 4:3的宽高比 */
  overflow: hidden;
}

.video-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: #fff;
  font-size: 12px;
}

.play-count {
  display: flex;
  align-items: center;
  gap: 2px;
}

.play-count .van-icon {
  font-size: 14px;
}
</style>
